<script setup lang="ts">
import { PropType, reactive, ref } from 'vue'
import type { TableData } from '@/api/uc/org/types'
import { Descriptions } from '@/components/Descriptions'
import { useI18n } from '@/hooks/web/useI18n'
import { ElTag, ElImage } from 'element-plus'

import Food from '../components/Dialog.vue'

// 获取字典
import { useCache } from '@/hooks/web/useCache'
import { useIcon } from '@/hooks/web/useIcon'
import { spForageInOutOrderSeeApi } from '@/api/cy/FoodGoTo'
const { wsCache } = useCache()
const dict: any = wsCache.get('dict')
// 字典通过value获取label
const getDictLabel = (type, value) => {
  let data = dict[type].find((item) => {
    return item.value == value
  })
  return data ? data.label : ''
}
const { t } = useI18n()
const dialogVisible = ref(false)
const dialogTitle = ref('')

const iconSee = useIcon({ icon: 'ep:view' })
const data = ref<any>({})

const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<TableData>>,
    default: () => null
  },
  detailSchema: {
    type: Array as PropType<DescriptionsSchema[]>,
    default: () => []
  },
  id: {
    type: String,
    default: null
  }
})

console.log(props)

// 调用查看接口获取信息
const getQuarantineOrderSee = async () => {
  if (props.id) {
    const res = await spForageInOutOrderSeeApi({ id: props.id })
      .catch(() => {})
      .finally(() => {})
    if (res) {
      data.value = res.data
    }
  } else {
    data.value.detailedData = []
    data.value.fileData = []
  }
}

const actionType = ref('')
// const saveLoading = ref(false)
const d_columns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: '序号',
    type: 'index',
    width: 30
  },
  {
    field: 'forage_name',
    label: '饲料档案',
    width: 150
  },
  {
    field: 'forage_specs_name',
    label: '饲料规格',
    width: 150
  },
  {
    field: 'apply_number',
    label: '申请数量',
    width: 150
  },
  {
    field: 'actual_number',
    label: '实际数量',
    width: 150
  },
  {
    field: 'amount',
    label: '采购金额',
    width: 150
  },
  {
    field: 'action',
    width: 60,
    fixed: 'right',
    label: '操作'
  }
])
// 点击弹窗
const ls = ref()
const action = async (type: string, row: any = {}) => {
  actionType.value = type
  switch (type) {
    case 'mu':
      dialogTitle.value = '选择牧场 (双击选择)'
      dialogVisible.value = true
      // data.value.detailedData = []

      break
    case 'add':
      console.log(row)
      dialogTitle.value = '新增'
      ls.value = row.id
      dialogVisible.value = true
      break
    default:
      console.log('未知类型')
  }
}
const editRef = ref()

// const save = async () => {
//   const edit = unref(editRef)
//   switch (actionType.value) {
//     case 'add':
//       console.log(await edit.rfid, 'eeee')
//       // data.value.rfid = await edit.rfid
//       dialogVisible.value = false
//       saveLoading.value = false
//       break
//     case 'mu':
//       // console.log(await edit.save(), await edit.aaa, 'eeee')
//       dialogVisible.value = false
//       saveLoading.value = false
//       break
//     default:
//       console.log('未知类型')
//   }
// }

const init = async () => {
  // 调用查看接口查询数据
  await getQuarantineOrderSee()
}
init()
defineExpose({ id: props.id })
</script>

<template>
  <div>
    <Descriptions :schema="props.detailSchema" :data="props.currentRow || {}">
      <template #is_stop="{ row }: { row: TableData }">
        <ElTag :type="row.is_stop === '0' ? 'success' : row.is_stop === '1' ? 'warning' : 'danger'">
          {{
            row.is_stop === '0' ? '启用' : row.is_stop === '1' ? '停用' : t('tableDemo.commonly')
          }}
        </ElTag>
      </template>

      <template #org_type="{ row }: { row: TableData }">
        <div>{{ getDictLabel('org_type', row.org_type) }}</div>
      </template>

      <template #type="{ row }: { row: TableData }">
        <div>{{ getDictLabel('in_out_type', row.type) }}</div>
      </template>

      <template #out_type="{ row }: { row: TableData }">
        <div>{{ getDictLabel('out_type', row.out_type) }}</div>
      </template>

      <template #in_type="{ row }: { row: TableData }">
        <div>{{ getDictLabel('in_type', row.in_type) }}</div>
      </template>

      <template #business_license="{ row }: { row: TableData }">
        <ElImage v-if="row.business_license" :src="row.business_license" />
      </template>

      <template #identity_card_front="{ row }: { row: TableData }">
        <ElImage v-if="row.identity_card_front" :src="row.identity_card_front" />
      </template>

      <template #identity_card_back="{ row }: { row: TableData }">
        <ElImage v-if="row.identity_card_back" :src="row.identity_card_back" />
      </template>
    </Descriptions>

    <ContentWrap title="明细数据">
      <Table :columns="d_columns" :data="data.detailed" :selection="false" :border="true">
        <template #earcon_breed="{ row }: { row: any }">
          <div>{{ getDictLabel('breed', row.earcon_breed) }}</div>
        </template>
        <template #earcon_breed_sub="{ row }: { row: any }">
          <div>{{ getDictLabel('breed_sub', row.earcon_breed_sub) }}</div>
        </template>
        <template #earcon_purpose="{ row }: { row: any }">
          <div>{{ getDictLabel('purpose', row.earcon_purpose) }}</div>
        </template>
        <template #earcon_sex="{ row }: { row: any }">
          <div>{{ getDictLabel('animal_sex', row.earcon_sex) }}</div>
        </template>
        <template #state="{ row }: { row: any }">
          <div>{{ getDictLabel('quarantine_order_detailed_state', row.state) }}</div>
        </template>

        <template #action="{ row }">
          <ElButton circle :icon="iconSee" @click="action('add', row)" title="查看" />
        </template>
      </Table>
    </ContentWrap>
  </div>
  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <Food v-if="actionType == 'add'" ref="editRef" :see="ls" />
    <!-- <Mu v-if="actionType == 'mu'" ref="editRef" /> -->
    <template #footer>
      <!-- <ElButton v-if="actionType == 'add'" type="primary" :loading="saveLoading" @click="save()">
        保存
      </ElButton> -->
      <ElButton @click="dialogVisible = false">关闭</ElButton>
    </template>
  </Dialog>
</template>
